<template>
	<view class="page flex jc-center" v-if="show">
		<view class="video">
			<video id="demoVideo" :show-fullscreen-btn="false" :autoplay="autoplay" :controls="controls"
				:show-center-play-btn="false" object-fit="fill" src="../../static/video/BlindBox.mp4">
			</video>
			<m-icon @click="show=false" size="54" gap="30" color="#fff" type="icon-shanchu1" class="guanbi"></m-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "m-video",
		data() {
			return {
				show: false,
				videoContext: null,
				controls: true,
			};
		},
		props: {
			disable: {
				type: Boolean,
				default: false
			},
			autoplay: {
				type: Boolean,
				default: true
			},
		},
		mounted() {},
		methods: {
			open() {
				this.videoContext = uni.createVideoContext("demoVideo", this);
				this.videoContext.play()
				this.show = true;
			},
			close() {
				this.show = false;
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: fixed;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.5);
		height: 100%;
		width: 100%;
		top: 0%;
		left: 0px;
		z-index: 1;

		.video {
			background-color: red;
			position: relative;
			width: 600rpx;
			height: 1046rpx;

			uni-video {
				width: 100%;
				height: 100%;
			}

			.guanbi {
				position: absolute;
				bottom: -50px;
				left: 50%;
				z-index: 2;
				transform: translate(-50%);
			}

		}


	}
</style>